* {
  -moz-user-select: none;
  -o-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.text-magic {
  position: absolute;
  top: 22%;
  left: 50%;
  width: 380px;
  background: pink;
  transform: translate(-50%, -50%) scale(2.8);
  font-size: 36px;
  font-family: Raleway, Verdana, Arial;
  color: transparent;
}
.white {
  position: absolute;
  left: -10px;
  width: 100%;
  height: 1px;
  background: #000;
  z-index: 4;
  animation: whiteMove 10s ease-out infinite;
}
.text-magic::before {
  content: attr(data-word);
  position: absolute;
  top: 0;
  left: 0;
  height: 36px;
  color: red;
  overflow: hidden;
  z-index: 2;
  filter: contrast(200%);
  text-shadow: 1px 0 0 red;
  animation: move 0.95s infinite;
}
.text-magic::after {
  content: attr(data-word);
  position: absolute;
  top: 0;
  left: -1px;
  height: 36px;
  color: rgba(255, 255, 255, 0.8);
  overflow: hidden;
  z-index: 3;
  color: cyan;
  filter: contrast(200%);
  text-shadow: -1px 0 0 cyan;
  mix-blend-mode: lighten;
  animation: move 1.1s infinite -0.5s;
}
@keyframes whiteMove {
  9% {
    top: 38px;
  }
  14% {
    top: 8px;
  }
  18% {
    top: 42px;
  }
  22% {
    top: 1px;
  }
  32% {
    top: 32px;
  }
  34% {
    top: 12px;
  }
  40% {
    top: 26px;
  }
  43% {
    top: 7px;
  }
  99% {
    top: 30px;
  }
}
@keyframes move {
  10% {
    top: -0.4px;
    left: -1.1px;
  }
  20% {
    filter: hue-rotate(-90deg);
    top: 0.4px;
    left: -0.2px;
  }
  30% {
    filter: hue-rotate(0);
    left: 0.5px;
  }
  40% {
    top: -0.3px;
    left: -0.7px;
  }
  50% {
    filter: blur(1px);
    left: 0.2px;
  }
  60% {
    filter: blur(0);
    top: 1.8px;
    left: -1.2px;
  }
  70% {
    top: -1px;
    left: 0.1px;
  }
  80% {
    top: -0.4px;
    left: -0.9px;
  }
  90% {
    left: 1.2px;
  }
  100% {
    left: -1.2px;
  }
}
